<li class="current">
	<div class="box">
		<h4>1.引入HTML组件方式：</h4>
		<!-- 方法1：使用jQuery里面的load方法引入HTML组件-->
		<div class="include1"></div>
		<!-- 方法2：使用file引入HTML组件-->
		<div class="include2" file="hero_ydc.html"></div>
	</div>
	<div class="box">
		<div class="">
		
	</div>
</li>
<li>
	<div class="box">
		<h4>2.html瀑布流</h4>
		<div class="content ml-2">
			<p class="mb-0">① 一行几排：column-count: 5;</p>
			<p class="mb-0">② 一行间隔：column-gap: 0;</p>
			<p class="mb-0">③ 递增一个或多个计数器值(当前第几个)：counter-increment:名称;</p>
			<p>④ 设定计数器：counter(名称);</p>
		</div>
		<div class="list_pubu"></div>
	</div>
</li>
<li>
	<div class="box">
		<h4>flex+margin排版布局</h4>
		<div class="f_listbox">
			<p>1.不加margin</p>
			<div class="f_list0"></div>
			<p>2.margin:auto;</p>
			<div class="f_list1"></div>
			<p>3.自定子类定义：① margin:auto; ② margin-left/right</p>
			<div class="f_list2"></div>
			<p>4.定义固定边距：一行8个<br>---- 缺点：响应式效果不好</p>
			<div class="f_list3"></div>
		</div>
	</div>
</li>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="public/json_data.json" type="text/javascript"></script>
<!-- 引用文件方法： -->
<script type="text/javascript">
	//方法1：
	// $('.container').load('hero_ydc.html',function(response,state,xhr){
	// 	console.log(response,state,xhr);
	// });
	$('.include1').load('hero_ydc.html');
	
	//方法2：
	$(".include2").each(function() {
	    if (!!$(this).attr("file")) {
	        var $includeObj = $(this);
	        $(this).load($(this).attr("file"), function(html) {
	            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
	        })
	    }
	});
</script>

<script type="text/javascript">
	
	var arr = Array(19);
	$(function(){
	render();         
		flex_render();
	});
	// html瀑布
	function render(){
		var html = `<div class="list">`;
		var str = ``;
		$.each(imgList,function(key,value){
			str += `
				<div class="item">
					<img src="${value}" >
				</div>
			`;
		})
		html += str +`</div>`;
		$('.list_pubu').append(html);
	}
	
	// flex+margin排版布局
	function flex_render(){
		let befater=`<div class="flex">`;
		let html0=``;
		let html1=``;
		let html2=``;
		let html3=``;
		$.each(arr,(k,v)=>{
			html0 += `<div class="item">${k}</div>`
			html1 += `<div class="item item1">${k}</div>`
			html2 += `<div class="item item2">${k}</div>`
			html3 += `<div class="item item3">${k}</div>`
		});
		html0 = befater + html0 +`</div><hr>`;
		html1 = befater + html1 +`</div><hr>`;
		html2 = befater + html2 +`</div><hr>`;
		html3 = befater + html3 +`</div><hr>`;
		$('.f_list0').append(html0)
		$('.f_list1').append(html1)
		$('.f_list2').append(html2)
		$('.f_list3').append(html3)
	}
</script>
